<template>
   <sideBar>
        <sideBarItem path="/grades">
            <img slot="item-icon" src="../assets/img/gradeselect.png">
            <div slot="item-text">Grades</div>
            <img slot="item-icon2" src="../assets/img/down.png">
            <img slot="item-icon2-active" src="../assets/img/left.png">
        </sideBarItem>

        <sideBarItem path="/modify">
            <img slot="item-icon" src="../assets/img/modify.png">
            <div slot="item-text">Modify</div>
            <img slot="item-icon2" src="../assets/img/down.png">
            <img slot="item-icon2-active" src="../assets/img/left.png">
        </sideBarItem>
        
   </sideBar>
</template>
<script>
import sideBar from './Sidebar/sideBar.vue';
import sideBarItem from './Sidebar/sideBarItem.vue';
export default {
   name: 'MainSideBar',
   components: {
    sideBar,sideBarItem
   },
};
</script>
<style lang='' scoped>
</style>